<md-card>
  <md-card-header>
    <md-card-title>
      <md-icon (click)="toggleCollapse()">{{collapseIcon}}</md-icon>
      {{testName}}
    </md-card-title>
    <md-card-subtitle [ngClass]="resultText.toLowerCase()">{{resultText}}</md-card-subtitle>
  </md-card-header>
  <md-card-content *ngIf="!collapse">
    <div class="images-section" [ngClass]="mode" [class.flipping]="flipping">
      <div class="image-section test-section" >
        <div class="image-title">Test image</div>
        <div><img [src]="testImageUrl"/></div>
      </div>
      <div class="image-section diff-section" >
        <div class="image-title">Diff image</div>
        <div><img [src]="diffImageUrl"/></div>
      </div>
      <div class="image-section gold-section">
        <div class="image-title">Reference image</div>
        <div><img [src]="goldImageUrl"/></div>
      </div>
    </div>
  </md-card-content>
  <md-card-actions>
    <md-button-toggle-group [(ngModel)]="mode" class="mode-section">
      <md-button-toggle value="diff">
        Diff
      </md-button-toggle>
      <md-button-toggle value="flip">
        Flip
      </md-button-toggle>
      <md-button-toggle value="side">
        Side by side
      </md-button-toggle>
    </md-button-toggle-group>
    <button md-button color="primary" (click)="flip()" *ngIf="mode === 'flip'">Flip</button>
  </md-card-actions>
</md-card>
